<template>
    <div>
        <Navbar>首页</Navbar>
        <RoomList :rooms='list' :dataState='dataState' @requestMore='requestList'></RoomList>
    </div>
</template>

<script>
    import RoomList from '../components/RoomList'
    export default {
        data:function(){
            return {
                list:[],
                dataState:"normal"/*使用数据请求状态记录*/
            }
        },
        components:{
            RoomList,
        },
        mounted: function () {
            this.requestList()
        },
        methods: {
            requestList: function () {
                if(this.dataState == 'loading'){
                    return 
                }
                this.dataState = 'loading'
                this.$ajax.get('/douyu/api/RoomApi/live',{
                    params:{
                        /*根据list数组的长度计算出要加载的页数*/
                        offset:Math.floor(this.list.length/30) /*带参数的ajax请求*/
                    }
                })
                .then(res=>{
                    this.list = this.list.concat(res.data.data)/*外处理，形成新的数组*/
                    this.dataState = 'success'
                },()=>{
                    this.dataState = 'fail'
                })
            }
        }
    }

</script>

<style scoped>
    
</style>